
<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>BootStrop</title>
<!--[if it IE9]>
  <script src="http://cdn.bootcss.com/html5shrv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respon.min.js"></script>
[if it IE9]-->
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/responsive-nav.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
.port-ul{margin: 0 -1.5%; padding:0 420px;}
.port-li{float: left; width: 23%; margin: 10px 1%; list-style: none;}

.port-li h3{font-size: 20px; margin: 5px 0 10px;}
.port-li p{font-weight: 300; line-height: 20px; font-size: 14px; margin-bottom: 15px;}
.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #66AF33; background-color:#66AF33; text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #66AF33; transition: 0.4s;}
.text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}

.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);}
.port-1 .text-desc{
    opacity: 0.9; top: -100%; color: #000; padding: 45px 20px 20px;

    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}
.port-1 img{
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}
.port-1:hover img{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.port-1.effect-1:hover .text-desc{top: 0;}

.port-1.effect-2 .text-desc{top: auto; bottom: -100%;}
.port-1.effect-2:hover .text-desc{bottom: 0;}

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px;}
/* effect-1 css end */

</style>
</head>

<body>
<!-- nav start -->
  <header>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
        	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse navbar-left" id="header-navbar">
          <ul class="nav navbar-nav">
            <li style="margin-top:-10px;"><a class="" href="#"><img src="images/logo.png" alt="小云" width="100" height="46" class="img-responsive"></a></li>
            <li class="active li-active"><a href="#">首页</a></li>
			      <li class="dropdown li-active" onmouseover="nactive(this)" onmouseout="cactive(this)">
				      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">产品</a>
				      <ul class="dropdown-menu"><li><a href="#" hidefocus="true">硬件方案</a></li></ul>
			     </li>
    			<li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">小云商学院</a></li>
    			<li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">合作加盟</a></li>
          <li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">小云商学院</a></li>
          <li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">合作加盟</a></li>
          <li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">小云商学院</a></li>
          <li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">合作加盟</a></li>
    			<li onmouseover="nactive(this)" onmouseout="cactive(this)" class="li-active"><a href="#">关于</a></li>
        </ul>
      </div>
    </div>
   </nav>
</header>
<!-- nav end -->
<div class="container-fuild">
  <div class="row">
<!--carousel start-->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin:0 -15px;">
     <ol class="carousel-indicators">
       <li data-target="#c-slide" data-slide-to="0" class="active"></li>
       <li data-target="#c-slide" data-slide-to="1" class=""></li>
       <li data-target="#c-slide" data-slide-to="2" class=""></li>
     </ol>
     <div class="carousel-inner" role="listbox">
        <div class="item active text-center" style="background:url(images/1.jpg);padding:300px 0;color:#fff;">
          <h1>Voice Broadcasting Alerts</h1>
          <h1 class="wow flash" data-wow-delay="3s" style="margin-top:20px;">Enterprise Grade Platform</h1>
          <p style="margin-top:20px;">
             Plivo's Voice API has all the building blocks you need including IP PBX, Cloud IVR, customized routing logic and free recording.
          </p>
        </div>
        <div class="item text-center" style="background:url(images/2.jpg);padding:300px 0;color:#fff;">
          <h1>Welcome to CRYSTAL Design</h1>
          <h1  style="margin-top:20px;">Enterprise Grade Platform</h1>
          <p style="margin-top:20px;">
             Plivo's Voice API has all the building blocks you need including IP PBX, Cloud IVR, customized routing logic and free recording.
          </p>
        </div>
        <div class="item text-center" style="background:url(images/3.jpg);padding:300px 0;color:#fff;">
          <h1>Extensive Device Support</h1>
         <h1  style="margin-top:20px;">Enterprise Grade Platform</h1>
          <p style="margin-top:20px;">
             Plivo's Voice API has all the building blocks you need including IP PBX, Cloud IVR, customized routing logic and free recording.
          </p>
        </div>
    </div>
         <!-- <a class="left carousel-control" href="#c-slide" data-slide="prev">
         <i class="fa fa-chevron-left"></i> </a> <a class="right carousel-control" href="#c-slide" data-slide="next"> <i class="fa fa-chevron-right hidden-sm"></i>
         </a> -->
    </div>
  </div>
  <!--carousel end-->
</div>
 <!--content01 start-->
<div class="container">
  <div class="row">
    <div class="col-lg-5 " style="margin:100px 0;">
    <h3 style="font-weight:bold; margin-top:50px;">Welcome to CRYSTAL Design</h3>
    <h2 style="font-weight:bold;color:#66AF33;">Digital Studio in Bangkok</h2>

    <p style="margin-top:60px;">Crystal Design is free mobile website template for everyone. Feel free to use this for your website. Please spread a word about <span class="text-primary">template</span><span class="text-success">mo</span><span class="text-danger">.com</span> to your friends. Integer lorem magna, gravida vitae metus a, euismod faucibus nisi. In sed nulla magna. Nulla in mauris ullamcorper, cursus lorem lobortis, pellentesque enim. Ut vel pellentesque est. Maecenas sed malesuada tellus.
    </p>
    </div>

    <div class="col-lg-6 " style="margin:100px 0px;margin-left:100px;">
      <h3 style="font-weight:900px;">Our Location</h3>
      <div class="col-lg-12" style="margin-top:10px;">
        <img src="images/company-img-1.jpg" width="45%"> <img src="images/company-img-2.jpg" width="45%" style="margin-left:3px;">
      </div>
      <div class="col-lg-12" style="margin-top:7px;">
        <img src="images/company-img-3.jpg" width="45%"> <img src="images/company-img-4.jpg" width="45%" style="margin-left:3px;">
      </div>
    </div>
  </div>
</div>
<!--content01 end-->
<!-- content02 start
<div class="container-fuild">
  <div class="row text-center" style="background:#404040;">
      <div class="col-lg-4" style="margin:50px 650px;color:#fff;margin-bottom:20px;">
       <h3 style="font-weight:blod;">MEET CRYSTAL TEAM</h3>
       <p style="margin-top:30px;line-height:1.75em;">Mauris mattis vitae libero eget iaculis. Donec et augue quis quam porttitor consectetur ut nec sem. Integer sagittis viverra quam quis ultricies. Aenean risus nisl, consequat at nunc id, tincidunt tristique mauris.
       </p>
    </div>
 </div>
     <div class="row" style="background:#404040;padding-bottom:60px;">
        <ul class="port-ul">
            <li class="port-li">
                <div class="port-1 effect-1">
                    <div class="image-box">
                        <img src="images/team-img-1.jpg" width="100%">
                    </div>
                    <div class="text-desc">
                        <h3>Your Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#" class="btn">Learn more</a>
                    </div>
                </div>
            </li>
            <li class="port-li">
                <div class="port-1 effect-2">
                    <div class="image-box">
                        <img src="images/team-img-2.jpg" width="100%">
                    </div>
                    <div class="text-desc">
                        <h3 >Your Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#" class="btn">Learn more</a>
                    </div>
                </div>
            </li>
            <li class="port-li">
                <div class="port-1 effect-3">
                    <div class="image-box">
                        <img src="images/team-img-3.jpg" width="100%">
                    </div>
                    <div class="text-desc">
                        <h3>Your Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#" class="btn">Learn more</a>
                    </div>
                </div>
            </li>
            <li class="port-li">
                <div class="port-1 effect-3">
                    <div class="image-box">
                        <img src="images/team-img-4.jpg" width="100%">
                    </div>
                    <div class="text-desc">
                        <h3>Your Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#" class="btn">Learn more</a>
                    </div>
                </div>
            </li>
        </ul>
     </div>

</div> -->
 <!--content02 end-->
<!-- content03 start
<section id="service">
    <div class="container">
        <div class="row" style="margin:70px 0;">
            <div class="text-center col-md-12 wow fadeInDown" data-wow-delay="2000" style="margin-bottom:30px;">
                <h3>CRYSTAL SERVICES</h3>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-8 text-center">
                <p>Mauris mattis vitae libero eget iaculis. Donec et augue quis quam porttitor consectetur ut nec sem. Integer sagittis viverra quam quis ultricies. Aenean risus nisl, consequat at nunc id, tincidunt tristique mauris.</p>
            </div>
            <div class="col-md-2" ></div>
            <div class="col-sm-6 col-md-4 wow fadeInLeft" data-wow-delay="2000" style="margin-top:40px;">
                <div class="media">
                    <div class="pull-left text-center" style="background:url(images/favicon.png);border-radius:50%;width:70px;height:70px;color:#fff;font-size:32px;padding-top:15px;margin-right:10px;padding-left:11px;">
                       <i class="glyphicon glyphicon-heart"></i>
                    </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color:#66AF33;font-weight:bold;">WEB DEVELOPMENT</h4><br>
                            <p>In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. Suspendisse faucibus suscipit diam.</p>
                        </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 wow fadeInDown" data-wow-delay="2000" style="margin-top:40px;">
                <div class="media">
                   <div class="pull-left text-center" style="background:url(images/favicon.png);border-radius:50%;width:70px;height:70px;color:#fff;font-size:32px;padding-top:15px;margin-right:10px;padding-left:11px;">
                       <i class="glyphicon glyphicon-heart"></i>
                    </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color:#66AF33;font-weight:bold;">DOMAIN HOSTING</h4><br>
                            <p>In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. Suspendisse faucibus suscipit diam.</p>
                        </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 wow fadeInRight" data-wow-delay="2000" style="margin-top:40px;">
                <div class="media">
                    <div class="pull-left text-center" style="background:url(images/favicon.png);border-radius:50%;width:70px;height:70px;color:#fff;font-size:32px;padding-top:15px;margin-right:10px;padding-left:11px;">
                       <i class="glyphicon glyphicon-heart"></i>
                    </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color:#66AF33;font-weight:bold;">WEB DESIGN</h4><br>
                            <p>In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. Suspendisse faucibus suscipit diam.</p>
                        </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 wow fadeInLeft" data-wow-delay="2000" style="margin-top:30px;">
                <div class="media">
                   <div class="pull-left text-center" style="background:url(images/favicon.png);border-radius:50%;width:70px;height:70px;color:#fff;font-size:32px;padding-top:15px;margin-right:10px;padding-left:11px;">
                       <i class="glyphicon glyphicon-heart"></i>
                    </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color:#66AF33;font-weight:bold;">SOCIAL MEDIA</h4><br>
                            <p>In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. Suspendisse faucibus suscipit diam.</p>
                        </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 wow fadeInDown" data-wow-delay="2000" style="margin-top:30px;">
                <div class="media">
                    <div class="pull-left text-center" style="background:url(images/favicon.png);border-radius:50%;width:70px;height:70px;color:#fff;font-size:32px;padding-top:15px;margin-right:10px;padding-left:11px;">
                       <i class="glyphicon glyphicon-heart"></i>
                    </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color:#66AF33;font-weight:bold;">RESPONSIVE THEMES</h4><br>
                            <p>In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. Suspendisse faucibus suscipit diam.</p>
                        </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 wow fadeInRight" data-wow-delay="2000" style="margin-top:30px;">
                <div class="media">
                    <div class="pull-left text-center" style="background:url(images/favicon.png);border-radius:50%;width:70px;height:70px;color:#fff;font-size:32px;padding-top:15px;margin-right:10px;padding-left:11px;">
                       <i class="glyphicon glyphicon-heart"></i>
                    </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color:#66AF33;font-weight:bold;">EMAIL HOSTING</h4><br>
                            <p>In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. Suspendisse faucibus suscipit diam.</p>
                        </div>
                </div>
            </div>
        </div>
    </div>
</section>
content03 end
content04 start
<section id="newsletter">
    <div class="container-fuild" style="background:url(images/newsletter-bg.jpg);background-size:100% 100%;color:#fff;padding:60px 0;">
        <div class="row text-center">
           <h3 style="font-weight:bold;" class="wow fadeInDown" data-wow-delay="2000">Global Numbers</h3><br>
           <p style="line-height:1.75em;">In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus sem mi id metus. <br>Suspendisse faucibus suscipit diam.In suscipit, purus id ultrices sodales, nunc mi porta nibh, bibendum maximus<br> sem mi id metus.
           </p>

            <div class=" center-block text-center">
            <div class="input-group col-md-4   input-group-lg col-md-offset-4" style="margin-top:50px;margin-bottom:100px;">
              <input type="text" class="form-control" placeholder="Enter your Email" aria-describedby="basic-addon2" style="background-color:#404040;border:1px solid #404040;">
              <span class="input-group-addon" id="basic-addon2" style="background:#66AF33;border:1px solid #66AF33;color:#fff;">submit</span>
            </div>
            </div>

            <div style="background:#404040;height:500px;">

            </div>

        </div>
    </div>
</section> -->
<!--content04 end-->





      <!--   <div class="col-lg-10 ">
         <div class="row">
          延时 data-wow-delay="0.3s"
             <div class="col-lg-5 ">
         <section class="i-module-med">
           <div class="col-lg-8">
              <h3>Global Numbers</h3>
             <img src="images/img.jpg" alt="img" class="wow bounceIn">
             </div>
         </section>

         </div>
             <div class="col-lg-5 col-lg-offset-1" data-wow-delay="0.3s">
                 <section class="i-module-med">
                     <i class="i-status"></i>
                     <h3>Exceptional Global</h3>
                     <img src="images/img1.jpg" alt="img" class=" wow  bounceIn">
                 </section>
             </div>
         </div>
         <div class="row">
             <div class="col-lg-5 ">
                 <section class="i-module-med">
                     <i class="fa fa-cubes fa-4x"></i>
                     <h3>Enterprise Grade Platform</h3>
                     <p>With 5 PoPs across 4 continents, our geographically distributed data centers provide sub 20ms access to international carriers and guarantees 99.95% uptime.</p>
                 </section>
             </div>
             <div class="col-lg-5 col-lg-offset-1 ">
                 <section class="i-module-med">
                     <i class="fa fa-gears fa-4x"></i>
                     <h3>Extensive Device Support</h3>
                     <p>Connect your existing IP PBX, Softswitch and SIP phones to the cloud. All hardphone devices that accept SIP and standard codecs (PCMU, PCMA) are supported.</p>
                 </section>
             </div>
         </div>
          <div class="col-lg-12" style="background:#f1f1f1;">
              <h1>Voice API Use Cases</h1>
              <div class="cols cf">
                  <div class="col-lg-12">
                      <section class="i-module-med">
                          <i class="i-call-tracking"></i>
                          <h3>Call Tracking
                          </h3>
                          <p>
                              Build call tracking software to track and measure ROI of your marketing ad campaigns. Use Plivo's Voice API, to instantly assign distinct phone numbers to your ads and start tracking your call analytics.
                          </p>
                      </section>
                  </div>
                  <div class="col-lg-12">
                      <section class="i-module-med">
                          <i class="fa fa-shield fa-4x" style="margin: 20px 0px 0px 22px"></i>
                          <h3>Two-Factor Authentication</h3>
                          <p>
                              Secure your online transactions by adding two-factor authentication seamlessly to your user flow on any web or mobile app. With just a few lines of code, Plivo can send secure one-time passwords to your users via a voice call.
                          </p>
                      </section>
                  </div>
              </div>
              <div class="cols cf">
                  <div class="col-lg-12">
                      <section class="i-module-med">
                          <i class="i-cloud"></i>
                          <h3><a href="/docs/getting-started/phone-menu-app/">IVR Phone Menu</a>
                          </h3>
                          <p>
                              Use our Voice API to build powerful interactive voice response (IVR) systems. Customize and automate call flows with an intelligent call logic that suits your business needs. Learn how to build your own <a href="/docs/getting-started/phone-menu-app/">IVR app</a> today!
                          </p>
                      </section>
                  </div>
                  <div class="col-1-">
                      <section class="i-module-med">
                          <i class="i-conference"></i>
                          <h3><a href="/docs/getting-started/conference-app/">Conference Calls</a>
                          </h3>
                          <p>Build a conferencing app that connects up to 100 users on the same call. Check out our full suite of <a href="/docs/xml/conference/">features</a> that will make your conference app smart and unique. Get started and make your first <a href="/docs/getting-started/conference-app/">conference app</a> today.
                          </p>
                      </section>
                  </div>
              </div>
              <div class="cols cf">
                  <div class="col-1-">
                      <section class="i-module-med">
                          <i class="i-call-centers"></i>
                          <h3>Call Centers</h3>
                          <p>Reduce costs &amp; increase scalability by building or extending your existing on-premise call center solution. Plivo's Voice API has all the building blocks you need including IP PBX, Cloud IVR, customized routing logic and free recording.
                          </p>
                      </section>
                  </div>
                  <div class="col-lg-12 wow   bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
                      <section class="i-module-med">
                          <i class="i-voice"></i>
                          <h3>Voice Broadcasting Alerts</h3>
                          <p>
                              Send personalized voice messages to your customers. Use our Voice API to build apps such as auto dialers, notification systems, or even phone surveying tools for political campaigns.
                          </p>
                      </section>
                  </div>
              </div>
          </div>
      </div>
          </div>
        </div> -->




<script type="text/javascript">

</script>
</body>
<!-- js start -->
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/responsive-nav.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<!-- js end -->
<script type="text/javascript">
var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null // optional scroll container selector, otherwise use window
  }
);
wow.init();</script>
</html>